import { PlusOutlined } from "@ant-design/icons";
import { Button, Card, Collapse, List, Modal, Tag } from "antd";
import { useState } from "react";
import { RuleGroupList } from "../rules";

interface RuleSelectProps {
    keyList: string[];
    onChange: (keyList: string[]) => void;
}

export default function RuleSelect(props: RuleSelectProps) {
    const [showModal, setShowModal] = useState(false);
    return (
        <div>
            {props.keyList.map(key => (
                <Tag key={key} closable style={{ margin: "4px 4px" }} onClose={e => {
                    e.stopPropagation();
                    e.preventDefault();
                    props.onChange(props.keyList.filter(cmpKey => key != cmpKey));
                }}>{key}</Tag>
            ))}
            <Button type="link" onClick={e => {
                e.stopPropagation();
                e.preventDefault();
                setShowModal(true);
            }}><PlusOutlined />增加规则</Button>
            {showModal == true && (
                <Modal title="规则列表" open footer={null} bodyStyle={{ maxHeight: "calc(100vh - 200px)", overflowY: "auto" }}
                    onCancel={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setShowModal(false);
                    }}>
                    <Collapse accordion>
                        {RuleGroupList.filter(rg => !props.keyList.includes(rg.key)).map(rg => (
                            <Collapse.Panel key={rg.key} header={rg.name}>
                                <Card bordered={false} style={{ width: "100%" }} extra={
                                    <Button onClick={e => {
                                        e.stopPropagation();
                                        e.preventDefault();
                                        const tmpList = props.keyList.slice();
                                        tmpList.push(rg.key);
                                        props.onChange(tmpList);
                                        setShowModal(false);
                                    }}>添加规则组</Button>
                                }>
                                    <List rowKey="code" dataSource={rg.ruleList} renderItem={rule => (
                                        <div>
                                            <h3>{rule.code}&nbsp;{rule.name}</h3>
                                            <p>{rule.descCn}</p>
                                            <p>{rule.descEn}</p>
                                        </div>
                                    )} />
                                </Card>
                            </Collapse.Panel>
                        ))}
                    </Collapse>
                </Modal>
            )}
        </div>
    );
}
